<template>
  <div>
    <!-- <van-uploader :after-read="afterRead" accept='image/*,video/*' :max-count="2" /> -->
    {{ aaa }}

    <input ref="inputVideo" type="file" name="video" id="video-input" accept="video/*" capture="camcorder" 
      @change="videoChange" @click="starVideotape"  />

    <video id="video" width='300' height="300" controls autoplay></video>

    <!-- <button @click="onVideo">点击录制视频</button> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      aaa: ''
    }
  },
  methods: {
    videoChange() {
      var file = document.getElementById('video-input').files[0];
      var url = URL.createObjectURL(file);
      console.log(file);
      this.aaa = url
      document.getElementById("video").src = url;
    },

    //点击button实现调起录制摄像头
    onVideo() {
      const that = this;
      that.$refs.inputVideo.click();
    },
    afterRead(file) {
      console.log(file);
      this.aaa = file
    },
    handleCapture(event) {
      const files = event.target.files;
      this.processMediaFiles(files);
    },
    handleSelection(event) {
      const files = event.target.files;
      console.log(files);
      // this.processMediaFiles(files);
    },
    processMediaFiles(files) {
      Array.from(files).forEach(file => {
        const reader = new FileReader();
        reader.onload = (event) => {
          const mediaDataURL = event.target.result;
          console.log(mediaDataURL);
          // 在这里可以处理照片或视频数据，例如展示在页面上或上传至服务器
        };
        reader.readAsDataURL(file);
      });
    }
  }
}
</script>

